<template>
  <div
    class="app-container"
    style="width: 100%"
  >
    <SearchForm
      :searchForm="searchForm"
      :searchData="searchData"
      :searchHandle="searchHandle"
    />
    <Table
      :loading="tabloading"
      :tableData="tableData"
      :rowHeader="rowHeader"
      :tableOption="tableOption"
      @handleButton="handleButton"
      :pageObj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    />
    <el-dialog
      :visible="dialogVisible"
      :title="dialogType==='new'?'添加用户':'编辑用户'"
      :close-on-click-modal="false"
      @close="dialogVisible=false"
    >
      <SearchForm
        :rules="Dialogrules"
        class="dialogSearch"
        :label-width="'150px'"
        :inline="true"
        ref="searchForm"
        :searchForm="DialogForm"
        :searchData="DialogData"
        :searchHandle="DialogHandle"
      />
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from "@/components/searchForm/index.vue";
import Table from "@/components/Table/index.vue";
export default {
  name: "DirectivePermission",
  components: {
    SearchForm,
    Table,
  },
  data() {
    const validateTel = (rule, value, callback) => {
      const regxTel = /^1[3|4|5|7|8][0-9]{9}$/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!regxTel.test(value)) {
        value = "";
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      dialogType: "new",
      tableData: [
        {
          name: "ninin",
          loginName: "admin",
          accountType: "管理员",
          tel: "12354698752",
          email: "5339541268@123.com",
        },
      ],
      tabloading: false,
      rowHeader: [
        {
          label: "姓名",
          prop: "name",
        },
        {
          label: "用户名",
          prop: "loginName",
        },
        {
          label: "账户类型",
          prop: "accountType",
        },
        {
          label: "电话",
          prop: "tel",
        },

        {
          label: "电子邮箱",
          prop: "email",
        },
      ],
      tableOption: {
        label: "操作",
        width: "340px",
        options: [
          {
            persstion: "",
            methods: "edit",
            label: "编辑",
            type: "primary",
          },
          {
            persstion: "",
            label: "删除",
            methods: "delete",
            type: "danger",
          },
          {
            persstion: "",
            label: "重置密码",
            methods: "Reset",
            type: "warning",
          },
        ],
      },
      pageObj: {
        total: 20,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },
      searchForm: [
        {
          type: "Input",
          prop: "selectName",
          placeholder: "请输入用户名/姓名/电话",
          clearable: "clearable",
          clear: () => {
            this.getData();
          },
        },
      ],
      searchData: {
        selectName: "",
      },
      searchHandle: [
        {
          type: "primary",
          label: "搜索",
          persstion: "",
          handle: () => {
            this.pageObj.currentPage = 1;
            this.getData();
          },
        },
        {
          type: "primary",
          label: "添加",
          persstion: "",
          handle: () => {
            this.dialogVisible = true;
            this.dialogType = "edit";
          },
        },
      ],
      DialogData: {
        name: "",
        userName: "",
        adminType: "",
        phone: "",
        email: "",
        password: "",
      },
      DialogForm: [
        {
          label: "姓名:",
          type: "Input",
          prop: "name",
          class: "nameInp",
          placeholder: "请输入姓名",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "用户名:",
          type: "Input",
          prop: "userName",
          class: "useNameInp",
          placeholder: "请输入用户名",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "账户类型:",
          type: "Select",
          prop: "adminType",
          class: "adminInp",
          placeholder: "请输入账户类型",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "电话:",
          type: "Input",
          prop: "phone",
          class: "phoneInp",
          placeholder: "请输入电话",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "电子邮箱:",
          type: "Input",
          prop: "email",
          class: "emailInp",
          placeholder: "请输入电子邮箱",
          clearable: true,
          clear: () => {},
          InputWidth: "width:100%",
          maxlength: 8,
        },
        {
          label: "密码:",
          type: "Input",
          prop: "password",
          class: "passwordInp",
          placeholder: "请输入密码",
          clearable: true,
          clear: () => {},
          required: true,
          InputWidth: "width:100%",
          maxlength: 8,
        },
      ],
      Dialogrules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: validateTel,
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        email: [
          {
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
      },
      DialogHandle: [
        {
          type: "danger",
          label: "取消",
          handle: (item) => {
            this.dialogVisible = false;
          },
          clickoutside: () => {},
        },
        {
          type: "primary",
          label: "确定",
          handle: () => {
            this.dialogVisible = false;
          },
        },
      ],
    };
  },
  methods: {
    handleCurrentChange() {},
    handleSizeChange() {},
    handleButton(methods, data, row, index) {
      if (methods == "edit") {
        this.dialogVisible = true;
        this.dialogType = "edit";
        // methods == "edit"
        //   ? (this.userManDialog.type = "edit")
        //   : (this.userManDialog.type = "look");
        // this.userManDialog.isShow = true;
        // this.userManDialog.content = row;
      } else if (methods == "delete") {
        this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        })
          .then(() => {
            userDel({
              id: row.id,
            }).then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.handleClose();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (methods == "Reset") {
        forgetUserPwdTwo({
          userId: row.id,
          passWard: 123456,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("重置密码成功");
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.app-container {
  .nameInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .useNameInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .adminInp {
    .el-form-item__content {
      width: 73%;
      .el-select {
        width: 100%;
      }
    }
  }
  .phoneInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .emailInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .passwordInp {
    .el-form-item__content {
      width: 73%;
    }
  }
  .dialogSearch {
    .InlineBlock {
      display: flex;
      justify-content: end;
      margin-right: 8%;
    }
  }
}
</style>

